<header fxLayout fxLayoutAlign="start center">
  <span fxFlex="50px">{{event.operator.name}}</span>
  <span fxFlex>{{event.fireDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</span>
  <button [matMenuTriggerFor]="menu" mat-button type="button">
    {{('EventSourceType.' + event.type)|translate}}
  </button>
  <mat-menu #menu="matMenu" xPosition="before">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</header>

<section>
  <mat-table [dataSource]="[packageBox]">
    <ng-container matColumnDef="code">
      <mat-header-cell *matHeaderCellDef>{{'PackageBox.code'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.code}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="grade">
      <mat-header-cell *matHeaderCellDef>{{'grade'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.grade.name}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="silkCount">
      <mat-header-cell *matHeaderCellDef>{{'silkCount'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.silkCount}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="netWeight">
      <mat-header-cell *matHeaderCellDef>{{'netWeight'|translate}}</mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.netWeight|number:'.3-3'}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="btns">
      <mat-header-cell *matHeaderCellDef>{{'Common.detail'|translate}}</mat-header-cell>
      <mat-cell (click)="detail()" *matCellDef="let row" matRipple>
        <mat-icon>subject</mat-icon>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</section>
